<template>
  <el-menu
    class="navbar"
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">新建</el-menu-item>
    <el-sub-menu index="2">
      <template #title>我的代课</template>
      <el-menu-item index="2-0">全部</el-menu-item>
      <el-menu-item index="2-1">申请的</el-menu-item>
      <el-menu-item index="2-2">代课的</el-menu-item>
      <el-menu-item index="2-3">被代的</el-menu-item>
    </el-sub-menu>
    <el-menu-item :disabled="!admin" index="3">管理</el-menu-item>
  </el-menu>
</template>

<script lang="ts">
  import router from '@/router'
  import { useAclStore } from '@/store/modules/acl'
  import { Menu } from '@element-plus/icons-vue'
  export default {
    name: 'NavBar',
    props: {
      activeIndex: {
        type: String,
        default: '1',
      },
    },
    setup() {
      const aclStore = useAclStore()
      const { admin } = storeToRefs(aclStore)
      const handleSelect = (key: string, keyPath: string[]) => {
        if (key === '1') {
          router.push({ path: '/index', replace: true }).then(() => {})
        } else if (key === '2') {
          router.push({ path: '/history/0', replace: true }).then(() => {})
        } else if (key === '2-0') {
          router.push({ path: '/history/0', replace: true }).then(() => {})
        } else if (key === '2-1') {
          router.push({ path: '/history/1', replace: true }).then(() => {})
        } else if (key === '2-2') {
          router.push({ path: '/history/2', replace: true }).then(() => {})
        } else if (key === '2-3') {
          router.push({ path: '/history/3', replace: true }).then(() => {})
        } else if (key === '3') {
          router.push({ path: '/manager', replace: true }).then(() => {})
        }
        console.log(key, keyPath)
      }
      return {
        handleSelect,
        admin,
        Menu,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .navbar {
    justify-content: center;
  }
</style>
